<template>
  <div style="text-align: center">
    <!-- 国际化 写分页的时候因为组件是英文所以要手动控制一下a这个组件的中英文 -->
    <!-- locale 显示的中文还是英文 -->
    <el-config-provider :locale="locale">
      <div class="app"></div>
      <router-view></router-view>
    </el-config-provider>
  </div>
</template>
<script setup lang="ts">
import { VueI18nInstance } from 'vue-i18n'
// import zhCn from '@locales/lang/zh-cn';
import { ref, onBeforeMount, computed, getCurrentInstance, ComponentInternalInstance } from 'vue'
onBeforeMount(() => {
  const dark = ref<string | null>(localStorage.getItem('dark'))
  const element = document.querySelector('html') as HTMLElement | null
  if (element) {
    if (dark.value == 'dark') {
      element.className = 'dark'
    } else {
      element.className = ''
    }
  }
})
// 组件切换回中文
// proxy 可以拿到全局的东西，也就是main.ts里面引入的东西
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const locale = computed(() => {
  const i18n = proxy?.$i18n as VueI18nInstance
  return i18n.messages[i18n.locale].el
})
</script>
<!-- 全局样式不加穿透否则不生效 穿透：scpoed -->
<style lang="scss">
.app {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5201314;
  height: 30px;
  width: 100%;
  /* background-color: pink; */
  /* 拖拽 加了这个就可以拖动页面了 */
  -webkit-app-region: drag;
}
</style>
